'use client';

import Image from 'next/image';
import { UserRole } from '@/types';

interface UserAvatarProps {
  name: string;
  role: UserRole;
  imageUrl?: string;
  size?: 'sm' | 'md' | 'lg';
}

const roleColors = {
  [UserRole.ADMIN]: 'bg-red-100 text-red-600',
  [UserRole.TEACHER]: 'bg-blue-100 text-blue-600',
  [UserRole.PARENT]: 'bg-green-100 text-green-600',
};

const sizes = {
  sm: 'w-8 h-8 text-sm',
  md: 'w-10 h-10 text-base',
  lg: 'w-12 h-12 text-lg',
};

export function UserAvatar({ name, role, imageUrl, size = 'md' }: UserAvatarProps) {
  const getInitials = (name: string) => {
    return name
      .split('')
      .filter(char => char.trim()) // 过滤空格
      .slice(0, 2) // 取前两个字符
      .join('');
  };

  if (imageUrl) {
    return (
      <div className={`relative rounded-full overflow-hidden ${sizes[size]}`}>
        <Image
          src={imageUrl}
          alt={name}
          fill
          className="object-cover"
        />
      </div>
    );
  }

  return (
    <div
      className={`
        flex items-center justify-center rounded-full font-medium
        ${sizes[size]} ${roleColors[role]}
      `}
    >
      {getInitials(name)}
    </div>
  );
} 